<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Hello C! You are my favorite!~</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Hello C! You are my favorite!~">
    <meta name="keywords" content="Hello C! You are my favorite!~">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Hello C! You are my favorite!~</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="./img/favicon.png">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="./img/favicon.png">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Hello C"/>
    <link rel="apple-touch-icon-precomposed" href="./img/favicon.png">
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="./img/favicon.png">
    <meta name="msapplication-TileColor" content="#0e90d2">
    <style type="text/css">
        @media only screen and (max-width:641px) {
            .layout-warp{
                height: 75% !important;
                top:10% !important;
            }
            .show-love-container{
               width: 100% !important;
            }
        }
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }
        .layout-warp{
            height: 50%;
            vertical-align: middle;
            width: 100%;
            position: absolute;
            top: 25%;
        }
        .button-show{
            width: 50%;
            text-align: center;
            margin: 0 auto;
            padding: 10px 0px;
            border-radius: 3px;
            border:2px solid #3ead7b;
            background-color: #4fc08d;
            color: #fff;
            cursor: pointer;
            animation-name:mylove-foot;
            animation-duration:5s;
            animation-timing-function:linear;
            animation-delay:2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-play-state:running;
            /* Firefox: */
            -moz-animation-name:mylove-foot;
            -moz-animation-duration:5s;
            -moz-animation-timing-function:linear;
            -moz-animation-delay:2s;
            -moz-animation-iteration-count:infinite;
            -moz-animation-direction:alternate;
            -moz-animation-play-state:running;
            /* Safari and Chrome: */
            -webkit-animation-name:mylove-foot;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:2s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:alternate;
            -webkit-animation-play-state:running;
            /* Opera: */
            -o-animation-name:mylove-foot;
            -o-animation-duration:5s;
            -o-animation-timing-function:linear;
            -o-animation-delay:2s;
            -o-animation-iteration-count:infinite;
            -o-animation-direction:alternate;
            -o-animation-play-state:running;
        }
        .button-show:hover{
            border:2px solid #4fdeb3;
            background-color: #4fdeb3;
        }
        .show-love-container{
            width: 50%;
            margin:0px auto;
            padding: 50px 0;
            text-align: center;
        }
        .show-love-container p{
            cursor: pointer;
        }
        .highlight{
            cursor: pointer;
        }
        .highlight:hover{
            color: #db3e3e
        }
        .mylove-content{
            color: #db3e3e;
            animation-name:mylove-content;
            animation-duration:5s;
            animation-timing-function:linear;
            animation-delay:2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-play-state:running;
            /* Firefox: */
            -moz-animation-name:mylove-content;
            -moz-animation-duration:5s;
            -moz-animation-timing-function:linear;
            -moz-animation-delay:2s;
            -moz-animation-iteration-count:infinite;
            -moz-animation-direction:alternate;
            -moz-animation-play-state:running;
            /* Safari and Chrome: */
            -webkit-animation-name:mylove-content;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:2s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:alternate;
            -webkit-animation-play-state:running;
            /* Opera: */
            -o-animation-name:mylove-content;
            -o-animation-duration:5s;
            -o-animation-timing-function:linear;
            -o-animation-delay:2s;
            -o-animation-iteration-count:infinite;
            -o-animation-direction:alternate;
            -o-animation-play-state:running;
        }

        @keyframes mylove-content
        {
            0%   {color: #ff5d5d; }
            25%  {color: #db3e3e; }
            50%  {color: #e64848; }
            75%  {color: #fflele;}
            100% {color: #fd0000; }
        }

        @-moz-keyframes mylove-content /* Firefox */
        {
            0%   {color: #ff5d5d; }
            25%  {color: #db3e3e; }
            50%  {color: #e64848; }
            75%  {color: #fflele;}
            100% {color: #fd0000; }
        }

        @-webkit-keyframes mylove-content /* Safari and Chrome */
        {
            0%   {color: #ff5d5d; }
            25%  {color: #db3e3e; }
            50%  {color: #e64848; }
            75%  {color: #fflele;}
            100% {color: #fd0000; }
        }

        @-o-keyframes mylove-content /* Opera */
        {
            0%   {color: #ff5d5d; }
            25%  {color: #db3e3e; }
            50%  {color: #e64848; }
            75%  {color: #fflele;}
            100% {color: #fd0000; }
        }

        .mylove-foot
        {
            animation-name:mylove-foot;
            animation-duration:5s;
            animation-timing-function:linear;
            animation-delay:2s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-play-state:running;
            /* Firefox: */
            -moz-animation-name:mylove-foot;
            -moz-animation-duration:5s;
            -moz-animation-timing-function:linear;
            -moz-animation-delay:2s;
            -moz-animation-iteration-count:infinite;
            -moz-animation-direction:alternate;
            -moz-animation-play-state:running;
            /* Safari and Chrome: */
            -webkit-animation-name:mylove-foot;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:2s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:alternate;
            -webkit-animation-play-state:running;
            /* Opera: */
            -o-animation-name:mylove-foot;
            -o-animation-duration:5s;
            -o-animation-timing-function:linear;
            -o-animation-delay:2s;
            -o-animation-iteration-count:infinite;
            -o-animation-direction:alternate;
            -o-animation-play-state:running;
        }

        @keyframes mylove-foot
        {
            0%   {color: red; }
            25%  {color: yellow; }
            50%  {color: blue; }
            75%  {color: green;}
            100% {color: red; }
        }

        @-moz-keyframes mylove-foot /* Firefox */
        {
            0%   {color: red; }
            25%  {color: yellow; }
            50%  {color: blue; }
            75%  {color: green;}
            100% {color: red; }
        }

        @-webkit-keyframes mylove-foot /* Safari and Chrome */
        {
            0%   {color: red; }
            25%  {color: yellow; }
            50%  {color: blue; }
            75%  {color: green;}
            100% {color: red; }
        }

        @-o-keyframes mylove-foot /* Opera */
        {
            0%   {color: red; }
            25%  {color: yellow; }
            50%  {color: blue; }
            75%  {color: green;}
            100% {color: red; }
        }
        .button-hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="layout-warp">
        <div class="button-show" onclick="showLove();" id='showLove-button'>Show My Love</div>   
        <div class="show-love-container" id="show-love-dom">
        </div>     
    </div>
    <script type="text/javascript">
        function showLove(){
            var button = document.getElementById('showLove-button');            
            button.classList.toggle("button-hide");
            var dom = document.getElementById('show-love-dom');
            dom.innerHTML = '你想多了吧？程序员哪来的女朋友？';
            setTimeout(function() {
                dom.innerHTML = '你没有女朋友？可是我有啊！233333~';
                setTimeout(function() {
                    dom.innerHTML = ''; 
                    var result = makeMyLoveStr(dom);  
                    var times = -1;
                    var intervalId = setInterval(function(){  
                            times += 1; 
                            dom.appendChild(result[times]);
                            if (times == result.length - 1) {  
                                clearInterval(intervalId);  
                            }     
                        },500); 
                    //
                },  1500);  
            },  3000);            
        }
        function makeMyLoveStr(dom){
            var result = [];
               for (var y = 1.5; y > -1.5; y -= 0.3) {
                   var outStr = '';
                   //var outStrHtml = '';
                   for (var x = -1.5; x < 1.5; x += 0.05) {
                       var a = x * x + y * y - 1;
                       outStr +=  a * a * a - x * x * y * y * y <= 0 ? "*" : ' ';
                   }
                   console.log(outStr);
                   console.log('\n');
               }

            for (var y = 1.5; y > -1.5; y -= 0.3) {
                var outStrHtml = '';
                for (var x = -1.5; x < 1.5; x += 0.05) {
                    var a = x * x + y * y - 1;
                    outStrHtml += a * a * a - x * x * y * y * y <= 0 ? "*" : '&nbsp;';
                }
                var msg = document.createElement("p");
                msg.classList.toggle("mylove-content");
                msg.innerHTML = outStrHtml;
                  dom.appendChild(msg);
                result.push(msg);
            }
            var msgLove = document.createElement('p');
            msgLove.classList.toggle("highlight");
            msgLove.classList.toggle("mylove-foot");
            msgLove.setAttribute('title','W.F.Y');
            msgLove.innerHTML = "Hello C! You are my favorite!~";
              dom.appendChild(msgLove);
            result.push(msgLove);
            return result;
        }
          showLove();
           function outLove(dom,str){
               setTimeout(function() {
                   alert(i);
               }, i * 5000);
               var msg = document.createElement("p");
               msg.innerHTML = str;
               dom.appendChild(msg);
           }
    </script>
</body>
</html>